<template>
  <div>
    <headers></headers>
    <div class="brand min-width ggbgc" v-loading="loading">
      <div class="banner"><img class="banner-img" :src="branddata.banner"></div>
      <div class="brand-widte width">
        <div class="BrandConcept">
          <div class="Concept-top">
            <p class="Concept-title">{{$t('message.concept')}}</p>
            <div class="Concept-content">{{concept.content}}</div>
          </div>
          <div class="Concept-bottom clear">
            <div class="Concept-bottom-list fl" v-for="item in concept.list" :key="item.id">
              <div class="Concept-bottom-list-backuround"></div>
              <div class="Concept-bottom-img" :style="{backgroundImage: 'url('+ item.img_src +')'}"></div>
              <div class="list-item">
                <p class="list-item-title">{{lang=='cn'?item.keyword:item.keyword_en}}</p>
                <i class="list-item-i"></i>
                <div class="list-item-content">{{lang=='cn'?item.title:item.title_en}}</div>
                <div class="list-item-contents">{{lang=='cn'?item.desc:item.desc_en}}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="Brandstory">
          <p class="Brandstory-title">{{$t('message.Thestory')}}</p>
          <div @mouseover="changeActive(index)"  @mouseleave="removeActive()" :class="es" class="Brandstory-list" v-for="(item,index) in story" :key="item.id">
            <div  class="list-img" :style="{backgroundImage: 'url('+ item.img_src +')'}"></div>
            <div class="Brandstory-list-backuround">
              <div  :class="'bak a'+index" class="list-content">
                <p class="list-content-title">{{lang=='cn'?item.title:item.title_en}}</p>
                <i class="list-content-i"></i>
                <div class="list-content-content">{{lang=='cn'?item.content:item.content_en}}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="new-box">
          <div class="new-box-top clear">
            <p class="new-box-top-title">{{$t('message.Companynews')}}</p>
            <p @click="funllnew('/newlist')" class="new-box-top-titleadd fr">MORE+</p>
          </div>
          <div class="new-box-bottom clear">
            <div @click="newsdetailid('/newdetails?newid='+item.id,item.id)" class="bottom-list fl"
                 v-for="item in news" :key="item.id">
              <div class="bottom-background">
                <div class="bottom-list-img" :style="{backgroundImage: 'url('+ item.img_src +')'}"></div>
              </div>
              <div class="bottom-list-bottom clear">
                <p class="bottom-list-title">{{item.title}}</p>
                <div class="bottom-list-content">{{item.content}}</div>
                <div class="el-icon-arrow-right"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

</template>
<script>
  import headers from "@/components/public/header"
  import axios from "axios"

  export default {
    name: 'brand',
    inject: ['reload'],
    components: {
      headers
    },
    data() {
      return {
        branddata: {},
        concept: {},
        story: [],
        news: [],
        loading: true,  //加载
        none:false,
        current:0,
        es:'',
      }
    },
    computed:{
      lang:{
        get(){
          if (sessionStorage.sitename) {
            return sessionStorage.sitename;
          }
        },
        set(){}
      }
    },
    created() {
      let stoorageLang = sessionStorage.sitename;
      let lang = '';
      if (stoorageLang === undefined){
        lang = navigator.language || navigator.userLanguage;
        lang = lang.substr(0,2);
        if(lang !== 'zh'){
          lang = 'en';
        }else {
          lang = 'cn'
        }
        sessionStorage.sitename = lang;
      }
      this.$i18n.locale = sessionStorage.sitename;
        this.init()
    },
    methods: {
      //跳转新闻列表
      funllnew(url) {
        this.$router.push({path: '/newlist'});
        sessionStorage.url = JSON.stringify(url)
      },
      // 请求数据
      init() {
        axios.get('brand/api/get_brand', {
          params: {
            language: this.lang,
          }
        }).then((response) => {
          this.branddata = response.data;
          this.concept = response.data.concept;
          this.story = response.data.story;
          this.news = response.data.news;
          this.loading = false;
        })
          .catch(function (error) {
            console.log(error);
          });
      },
      //传参到新闻详情
      newsdetailid(url,id) {
        sessionStorage.url = JSON.stringify(url);
        this.$router.push({
          name: 'newdetails',
          query: {
            newid: id
          }
        });
      },
      changeActive(index){
        setTimeout(()=>{
          this.es ='a'+index;
        },500)
      },
      removeActive(index){
          this.es = 'pp'
      }
    }
  }
</script>
<style scoped>
  .brand {
    min-width: 1200px;
    padding-bottom: 60px;
  }

  .brand .banner {
    max-width: 100%;
    max-height: 720px;
    overflow: hidden;
  }

  .brand .banner .banner-img {
    width: 100%;
    height: auto;
  }

  .brand .BrandConcept {
    padding-top: 42px;
  }

  .brand .BrandConcept .Concept-top {
    text-align: center;
  }

  .brand .BrandConcept .Concept-top .Concept-title {
    font-size: 20px;
    font-weight: bold;
    color: #020202;
  }

  .brand .BrandConcept .Concept-top .Concept-content {
    padding-top: 20px;
    font-size: 16px;
    color: #010101;
    line-height: 25px;
    width: 880px;
    margin: 0 auto;
  }

  .brand .BrandConcept .Concept-bottom {
    margin-top: 32px;
  }

  .brand .BrandConcept .Concept-bottom .Concept-bottom-list {
    text-align: center;
    margin-right: 1.5px;
    position: relative;
    overflow: hidden;
  }
  .brand .BrandConcept .Concept-bottom .Concept-bottom-list:hover .Concept-bottom-list-backuround{
    position: absolute;
    height: 400px;
    width: 399px;
    transition: .3s;
    -moz-transition: .3s;
    -webkit-transition: .3s;
    -o-transition: .3s;
    background: rgba(0,0,0,0.2);
    z-index: 3;
  }

  .brand .BrandConcept .Concept-bottom .Concept-bottom-list:nth-child(3) {
    margin-right: 0;
  }

  .brand .BrandConcept .Concept-bottom .Concept-bottom-list .Concept-bottom-img{
    height: 400px;
    width: 399px;
    background: no-repeat center center;
    background-size: cover;
  }

  .brand .BrandConcept .Concept-bottom .Concept-bottom-list .list-item {
    position: absolute;
    margin: 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .brand .BrandConcept .Concept-bottom .Concept-bottom-list .list-item .list-item-title {
    font-size: 42px;
    color: #fff;
  }

  .brand .BrandConcept .Concept-bottom .Concept-bottom-list .list-item .list-item-i {
    width: 32px;
    height: 4px;
    background: #fff;
    display: inline-block;
    margin-top: 30px;
  }

  .brand .BrandConcept .Concept-bottom .Concept-bottom-list .list-item .list-item-content {
    font-size: 20px;
    color: #919191;
    margin-top: 35px;
    line-height: 30px;
    width: 350px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .brand .BrandConcept .Concept-bottom .Concept-bottom-list .list-item .list-item-contents {
    font-size: 20px;
    color: #919191;
    line-height: 30px;
    width: 350px;
    overflow: hidden;
    max-height: 150px;
  }

  .brand .Brandstory {
    margin-top: 50px;
  }

  .brand .Brandstory .Brandstory-title {
    font-size: 20px;
    color: #020202;
    font-weight: bold;
    text-align: center;
    margin-bottom: 16px;
  }

  .brand .Brandstory .Brandstory-list {
    position: relative;
    margin-bottom: 40px;
  }

  .brand .Brandstory .Brandstory-list:last-child {
    margin-bottom: 0;
  }

  .brand .Brandstory .Brandstory-list .list-img {
    width: 1200px;
    height: 500px;
    background-size: cover;
    background: no-repeat center center;
  }

  .brand .Brandstory .Brandstory-list .list-img img {
    width: 100%;
    min-height: 100%;
  }
  .brand .Brandstory .Brandstory-list:hover .Brandstory-list-backuround{
    width: 1200px;
    height: 500px;
    background: rgba(0,0,0,0.5);
    position: absolute;
    top: 0;
    transition: .5s;
    -moz-transition: .5s;
    -webkit-transition: .5s;
    -o-transition: .5s;
  }
  .brand .Brandstory .Brandstory-list .list-content{
    position: absolute;
    left: 40px;
    bottom: 40px;
  }

  .brand .Brandstory .Brandstory-list .list-content .list-content-title {
    font-size: 20px;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .brand .Brandstory .Brandstory-list .list-content .list-content-i {
    width: 40px;
    height: 2px;
    background: #fff;
    display: block;
    margin-top: 22px;
  }

  .brand .Brandstory .Brandstory-list .list-content .list-content-content {
    width: 815px;
    font-size: 16px;
    color: #fff;
    margin-top: 22px;
    line-height: 25px;
  }

  .new-box {
    padding-top: 55px;
  }

  .new-box .new-box-top .new-box-top-title {
    display: inline-block;
    font-size: 20px;
    color: #020202;
    font-weight: bold;
    margin: 0;
    position: absolute;
    left: 50%;
    transform: translate(-50%);
  }

  .new-box .new-box-top .new-box-top-titleadd {
    font-size: 16px;
    margin-top: 5px;
    color: #020202;
    cursor: pointer;
  }

  .new-box .new-box-bottom {
    margin-top: 15px;
    display: block;
  }

  .new-box .new-box-bottom .bottom-list {
    margin-right: 18px;
    width: 388px;
    height: 470px;
    cursor: pointer;
    overflow: hidden;
    background: #fff;
    display: block;
  }
  .new-box .new-box-bottom .bottom-list:nth-child(3) {
    margin-right: 0;
  }
  .new-box .new-box-bottom .bottom-list .bottom-background{
    width: 390px;
    height: 290px;
    overflow: hidden;
  }
  .new-box .new-box-bottom .bottom-list .bottom-background .bottom-list-img {
    width: 390px;
    height: 290px;
    overflow: hidden;
    background: no-repeat center center;
    background-size: cover;
    transition: all 1s;
  }
  .new-box .new-box-bottom .bottom-list .bottom-list-img:hover{
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
    overflow: hidden;
  }
  .new-box .new-box-bottom .bottom-list .bottom-list-bottom {
    padding: 20px 17px 30px 20px;
    height: 179px;
    position: relative;
  }

  .new-box .new-box-bottom .bottom-list .bottom-list-bottom .bottom-list-title {
    font-size: 16px;
    color: #020202;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .new-box .new-box-bottom .bottom-list .bottom-list-bottom .bottom-list-content {
    font-size: 14px;
    color: #999999;
    margin-top: 20px;
    line-height: 20px;
    max-height: 40px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    /*! autoprefixer: off */
    -webkit-box-orient: vertical;
    /* autoprefixer: on */
    -webkit-line-clamp:2;
  }

  .new-box .new-box-bottom .bottom-list .bottom-list-bottom .el-icon-arrow-right {
    margin-top: 44px;
    font-size: 20px;
    color: #9a9a9a;
    font-weight: bold;
    position: absolute;
    bottom: 30px;
    right: 23px;
  }
  .bak{display: none}
  .a0 .a0,.a1 .a1,.a2 .a2,.a3 .a3，.a4 .a4，.a5 .a5，.a6 .a6，.a7 .a7，.a8 .a8，.a9 .a9，.a10 .a10，.a11 .a11，.a12 .a12
  {
    display: block;
  }
</style>
